import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gw_github_flutter/common/route_name.dart';

class SliderRoute extends StatefulWidget {
  SliderRoute({Key? key}) : super(key: key);

  @override
  State<SliderRoute> createState() => _SliderRouteState();
}

class _SliderRouteState extends State<SliderRoute> {
  double _value = 0;
  RangeValues _continuousValues = RangeValues(25.0, 75.0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(RouteName.sliderRoute),
      ),
      body: _body(),
    );
  }

  Widget _body() {
    return SingleChildScrollView(
      child: Column(
        children: [
          const Divider(),
          const Text("普通Slider"),
          Slider(
            value: _value,
            min: 0.0,
            max: 100.0,
            onChanged: (double value) => setState(() => _value = value),
            activeColor: Colors.redAccent,
            inactiveColor: Colors.orangeAccent,
          ),
          const Divider(),
          const Text('固定Slider'),
          const Slider(value: 25, min: 0.0, max: 100.0, onChanged: null),
          const Divider(),
          const Text('滑动带提示Slider'),
          Slider(
            value: _value,
            min: 0.0,
            max: 100.0,
            divisions: 100,
            label: '${_value.round()}',
            onChanged: (double value) {
              setState(() {
                _value = value;
              });
            },
          ),
          const Divider(),
          const Text('苹果样式slider'),
          CupertinoSlider(
            onChanged: (double value) {
              setState(() => _value = value);
            },
            value: _value,
            max: 100,
            min: 0,
          ),
          const Divider(),
          const Text('自定义Slider'),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              const Text("0"),
              SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    //已拖动的颜色
                    activeTrackColor: Colors.greenAccent,
                    //未拖动的颜色
                    inactiveTrackColor: Colors.green,
                    //提示进度的气泡的背景色
                    valueIndicatorColor: Colors.green,
                    //提示进度的气泡文本的颜色
                    valueIndicatorTextStyle: const TextStyle(
                      color: Colors.white,
                    ),

                    //滑块中心的颜色
                    thumbColor: Colors.blueAccent,
                    //滑块边缘的颜色
                    overlayColor: Colors.yellow,

                    //divisions对进度线分割后，断续线中间间隔的颜色
                    inactiveTickMarkColor: Colors.white,
                  ),
                  child: SizedBox(
                    width: 300,
                    child: Slider(
                      value: _value,
                      label: '$_value',
                      min: 0.0,
                      max: 100.0,
                      divisions: 100,
                      onChanged: (double val) {
                        setState(() {
                          // 转化精度
                          _value = val.floorToDouble(); //转化成double
                        });
                      },
                    ),
                  )),
              const Text("100"),
            ],
          ),
          const Divider(),
          const Text('普通RangeSlider'),
          RangeSlider(
            activeColor: Colors.red,
            inactiveColor: Colors.green,
            divisions: 100,
            values: _continuousValues,
            min: 0.0,
            max: 100.0,
            onChanged: (RangeValues values) {
              setState(() {
                _continuousValues = values;
              });
            },
            labels: RangeLabels('${_continuousValues.start.round()}',
                '${_continuousValues.end.round()}'),
          ),
          const Divider(),
          const Text('固定RangeSlider'),
          RangeSlider(
            activeColor: Colors.red,
            inactiveColor: Colors.green,
            divisions: 100,
            values: _continuousValues,
            min: 0.0,
            max: 100.0,
            onChanged: null,
          ),
          const Divider(),
          const Text('自定义RangeSlider'),
          SliderTheme(
              data: SliderTheme.of(context).copyWith(
                //已拖动的颜色
                activeTrackColor: Colors.greenAccent,
                //未拖动的颜色
                inactiveTrackColor: Colors.green,
                //提示进度的气泡的背景色
                valueIndicatorColor: Colors.green,
                //提示进度的气泡文本的颜色
                valueIndicatorTextStyle: const TextStyle(
                  color: Colors.white,
                ),

                //滑块中心的颜色
                thumbColor: Colors.blueAccent,
                //滑块边缘的颜色
                overlayColor: Colors.yellow,

                //divisions对进度线分割后，断续线中间间隔的颜色
                inactiveTickMarkColor: Colors.white,
              ),
              child: SizedBox(
                width: 300,
                child: RangeSlider(
                  values: _continuousValues,
                  labels: RangeLabels('${_continuousValues.start.round()}',
                      '${_continuousValues.end.round()}'),
                  min: 0.0,
                  max: 100.0,
                  divisions: 100,
                  onChanged: (RangeValues values) {
                    setState(() {
                      _continuousValues = values;
                    });
                  },
                ),
              )),
          const Divider(),
        ],
      ),
    );
  }
}
